<template lang="pug">
  div#Wode
    div.top-header
      i.iconfont.icon-shezhi(@click="$router.push('/set')")
    div.user-info
      div.info-block
        div.user-header
          img(:src="userData.head")
          span.user-vip V
        div.info-text
          span.user-name {{userData.name}}
          span.user-id(v-if="userData.ifVip") 用户名：{{userData.id}}
      div.operate-block
        div.operation.float-left
          span.operation-title 实名认证
          span.operation-text 实名认证，享专属实名徽章
        div.operation.float-right
          span.operation-title 升级VIP
          span.operation-text 升级成为VIP，享受更多特权
    div.user-menu
      ul
        li.menu-li
          span.icon-block.icon-color-jifen
            i.iconfont.icon-wodejifen
          span.menu-text 我的积分
        li.menu-li(@click="$router.push('/achievements')")
          span.icon-block.icon-color-chengjiu
            i.iconfont.icon-wodechengjiu
          span.menu-text 我的成就
        li.menu-li(@click="$router.push('/userStatus')")
          span.icon-block.icon-color-dongtai
            i.iconfont.icon-wodedongtai
          span.menu-text 我的动态
        li.horizontal-line
        li.menu-li(@click="$router.push('/userFriends')")
          span.icon-block.icon-color-haoyou
            i.iconfont.icon-wodehaoyou
          span.menu-text 我的好友
        li.menu-li(@click="$router.push('/userCollection')")
          span.icon-block.icon-color-shoucang
            i.iconfont.icon-shoucang-tianchong
          span.menu-text 我的收藏
        li.menu-li(@click="$router.push('/news')")
          span.icon-block.icon-color-xiaoxi
            i.iconfont.icon-wodexiaoxi
          span.menu-text 我的消息
        li.menu-li(@click="$router.push('/userChallenge')")
          span.icon-block.icon-color-tiaozhan
            i.iconfont.icon-wodetiaozhan
          span.menu-text 我的挑战
        li.menu-li
          span.icon-block.icon-color-xin
            i.iconfont.icon-zijianxin
          span.menu-text 自荐信
    actionBar(:navIndex = 'navIndex')
</template>
<script>
  import actionBar from '@/components/actionBar.vue'

  export default {
    data() {
      return {
        navIndex: 3,
        userData: {
          name: '铁皮人',
          id: '36956882466',
          head: require('@/assets/wode/userHead.png'),
          ifVip: true
        }
      }
    },
    components: {
      actionBar
    }
  }
</script>
<style scoped lang="less">
  #Wode {
    .icon-shezhi {
      float: right;
    }
    .user-info {
      background: #fff;
      padding: 10px 20px;
      border-bottom: 1px solid #f5f5f5;
      .info-block {
        overflow: hidden;
        .user-header {
          float: left;
          height: 60px;
          width: 60px;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          border-radius: 50%;
          position: relative;
          img {
            width: 100%;
            display: block;
          }
          .user-vip {
            position: absolute;
            height: 20px;
            width: 20px;
            background: #ffba00;
            right: 0;
            bottom: 0;
            color: #fff;
            line-height: 20px;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
          }
        }
        .info-text {
          float: left;
          margin-left: 10px;
          .user-name {
            float: left;
            font-size: 16px;
            line-height: 30px;
          }
          .user-id {
            font-size: 12px;
            color: #9c9c9c;
            float: left;
            line-height: 30px;
            clear: both;
          }
        }
      }
      .operate-block {
        margin-top: 10px;
        overflow: hidden;
        .operation {
          height: 50px;
          border: 1px solid #e6e6e6;
          width: calc(100% / 2 - 6px);
          .operation-title {
            display: block;
            font-size: 14px;
            line-height: 26px;
          }
          .operation-text {
            display: block;
            font-size: 12px;
            color: #9c9c9c;
          }
        }
      }
    }
    .user-menu {
      padding: 5px 20px;
      background: #fff;
      ul {
        .menu-li {
          height: 50px;
          text-align: left;
          .icon-block {
            text-align: center;
            vertical-align: middle;
            display: inline-block;
            height: 15px;
            width: 15px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            margin-right: 10px;
            .iconfont {
              font-size: 12px;
              color: #fff;
              line-height: 15px;
              display: block;
            }
          }
          .menu-text {
            display: inline-block;
            line-height: 50px;
            vertical-align: middle;
            font-size: 14px;
          }
          .icon-color-jifen {
            background: linear-gradient(#ffc926, #ffbb20);
            box-shadow: 0 1px 4px #ffbb20;
          }
          .icon-color-chengjiu {
            background: linear-gradient(#fda330, #fc8c28);
            box-shadow: 0 1px 4px #fc8c28;
          }
          .icon-color-dongtai {
            background: linear-gradient(#85d530, #6fcb28);
            box-shadow: 0 1px 4px #6fcb28;
          }
          .icon-color-haoyou {
            background: linear-gradient(#66b9f9, #55a8f8);
            box-shadow: 0 1px 4px #55a8f8;
          }
          .icon-color-shoucang {
            background: linear-gradient(#fda330, #fc8c28);
            box-shadow: 0 1px 4px #fc8c28;
          }
          .icon-color-xiaoxi {
            background: linear-gradient(#37e0a7, #2ed891);
            box-shadow: 0 1px 4px #2ed891;
          }
          .icon-color-tiaozhan {
            background: linear-gradient(#f265a5, #ef548e);
            box-shadow: 0 1px 4px #ef548e;
          }
          .icon-color-xin {
            background: linear-gradient(#92b2f9, #7a9ff8);
            box-shadow: 0 1px 4px #7a9ff8;
          }
        }
        .horizontal-line {
          height: 1px;
          background: #f5f5f5;
          margin: 5px 0;
        }
      }
    }
  }
</style>
